<template>
  <div id="banner">
    <template>
      <el-carousel :interval="8000" height="500px">
        <el-carousel-item v-for="banner in banners" :key="banner.id">
          <div class="banner-item">
            <div class="cover-box" @click="$router.push('/art/' + banner.id)">
              <img
                :src="banner.shop_hash | ipfsHash"
                alt=""
              />
            </div>
            <div class="info-box">
              <div class="art-name">{{ banner.title }}</div>
              <div class="tip">价格</div>
              <div class="art-price-box">
                <div class="eth-icon">
                  <img src="./images/ethereum.png" alt="" />
                </div>
                <div class="art-price">{{ banner.price | weiToEth }} ETH</div>
              </div>
              <div class="tip" v-if="banner.array_id != null">合集</div>
              <div class="collection-box" v-if="banner.array_id != null">
                <div class="collection-box-flex" @click="$router.push('/collection/'+banner.array_id)">
                  <div class="col-cover">
                    <img
                      :src="banner.array_img | ipfsHash
                      "
                      alt=""
                    />
                  </div>
                  <div class="col-name">{{ banner.array_name }}</div>
                </div>
              </div>
              <div class="flex-box-default">
                <div  style="margin-right: 20px">
                  <div class="tip">创作者</div>
                  <div class="user-box-flex">
                    <div class="user-box"  @click="$router.push('/user/'+banner.creator_address)">
                      <div class="user-avatar">
                        <img
                          :src="banner.creator_logo | ipfsHash"
                          alt=""
                          v-if="banner.creator_logo != null"
                        />
                        <RandomAvatar
                          :user_address="banner.creator_address"
                          v-if="banner.creator_logo == null"
                        />
                      </div>
                      <div class="user-name" v-if="banner.creator_nickname">@ {{ banner.creator_nickname }}</div>
                      <div class="user-name" v-if="!banner.creator_nickname">@ {{ banner.creator_address | filterAddress }}</div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="tip">持有者</div>
                  <div class="user-box-flex">
                    <div class="user-box" @click="$router.push('/user/'+banner.owner)">
                      <div class="user-avatar">
                        <img
                          :src="banner.owner_logo | ipfsHash"
                          alt=""
                          v-if="banner.owner_logo != null"
                        />
                        <RandomAvatar
                          :user_address="banner.owner"
                          v-if="banner.owner_logo == null"
                        />
                      </div>
                      <div class="user-name" v-if="banner.owner_nickname">@ {{ banner.owner_nickname }}</div>
                      <div class="user-name" v-if="!banner.owner_nickname">@ {{ banner.owner | filterAddress }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 蒙版 -->
          <div
            class="detail-mask"
            :style="{ background: 'url(http://172.17.147.23:8888/ipfs/' + banner.shop_hash + ')' }"
          ></div>
        </el-carousel-item>
      </el-carousel>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Banners",
  mounted() {
    this.$store.dispatch("banners");
  },
  computed: {
    ...mapState({
      banners: (store) => store.home.banners,
    }),
  },
};
</script>

<style lang='less'>
@media screen and (max-width: 940px) {
  #banner {
    .info-box {
      display: none !important;
    }
    .banner-item {
      padding: 0 20px !important;
    }
  }
}
#banner {
  .el-carousel__button {
    background-color: var(--themeColor1);
  }
  .banner-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 0 60px;
    padding-bottom: 10px;
    .cover-box:hover {
      transform: scale(1.02);
      transition: all 0.2s ease;
    }
    .cover-box {
      transition: all 0.2s ease;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px 0;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: cover;
      }
    }
    .info-box {
      background: #fff;
      width: 400px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      margin: 20px 0;
      margin-left: 20px;
      .tip {
        font-size: 14px;
        color: #999;
        margin-bottom: 5px;
      }
      .art-name {
        font-size: 30px;
        margin-bottom: 20px;
        font-weight: bold;
      }
      .art-price-box {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .eth-icon {
          height: 15px;
          width: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .art-price {
          margin-left: 10px;
          font-size: 18px;
        }
      }

      
      .collection-box {
        display: flex;
        .collection-box-flex:hover{
          box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05);
        }
        .collection-box-flex {
          cursor: pointer;
          padding: 5px 15px 5px 5px;
          border-radius: 5px;
          transition: all .2s ease;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .col-cover {
            width: 30px;
            height: 30px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              object-fit: cover;
            }
          }
          .col-name {
            margin-left: 10px;
            font-size: 14px;
          }
        }
      }
      .flex-box-default{
        display: flex;
        flex-wrap: wrap;
      }
      .user-box-flex:hover {
        .user-box {
          box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
        }
      }
      .user-box-flex {
        margin-bottom: 10px;
        display: flex;
        cursor: pointer;
        .user-box {
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05);
          /* width: 150px; */
          padding: 10px 20px 10px 10px;
          border-radius: 30px;
          .user-avatar {
            width: 30px;
            height: 30px;
            display: inline-block;
            img {
              border-radius: 50%;
              width: 100%;
              height: 100%;
            }
          }
          .user-name {
            font-size: 14px;
            display: inline-block;
            margin-left: 5px;
          }
        }
      }
    }
  }
  .detail-mask {
    z-index: -1;
    position: fixed;
    // filter: blur(30px) ;
    filter: blur(20px);
    -webkit-mask-image: linear-gradient(rgb(255, 255, 255), transparent);
    -webkit-mask-position-x: initial;
    -webkit-mask-position-y: initial;
    -webkit-mask-size: initial;
    -webkit-mask-repeat-x: initial;
    -webkit-mask-repeat-y: initial;
    -webkit-mask-origin: initial;
    -webkit-mask-clip: initial;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
  }
}
</style>